<template>
  <div class="index">
    <div class="t_top_tool">
     
      <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/callsystem/newcalls/waihuzhongxin' }">
      <i class="el-icon-arrow-left"></i>
      外呼任务</el-breadcrumb-item>
      <el-breadcrumb-item><span style="color:#2974FF;">订单外呼</span></el-breadcrumb-item>
    </el-breadcrumb>
      

      <div style="color: #a9a9a9;font-size: 14px;">
          欢迎<span><router-link style="color: #a9a9a9;margin-left: 10px;" to="/personalCenter">{{user_name}}</router-link></span>
          <span @click="exit" style="cursor: pointer; color:#2974FF;margin-left: 20px;">退出</span>
      </div>
    </div>
    <div class="t_logo_box">
      <div class="t_logo_left">
        <div class="t_logo_img"> 
          <div class="t_logo_bg">
           <img  src="../../../../static/img/wh.png" alt="">
          </div>
          敢探号外呼中心
        </div>
      </div>
      <div class="t_renwu_box">
        <div>{{ title }}</div>
        <div style="margin-left: 60px;">{{called_num}}/{{ total_num }}</div>
      </div>
    </div>
    <div class="fenline" ></div>
    <div style="background-color: white;" class="con" v-loading='loading'>
      
      <div class="t_search_box">
        <el-input v-if="this.$route.query.type!=3" style="width: 300px;" v-model="formInline.source" placeholder="订单来源"></el-input>
        <el-input v-if="this.$route.query.type!=3" style="width: 300px;" v-model="formInline.good_sku" placeholder="商品编码"></el-input>
       
        <el-date-picker style="width: 470px; margin-right: 20px;" v-model="times" @change="timechange"
          clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="——" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
        <el-select v-if="this.$route.query.type!=3" style="width: 300px;margin-right: 20px;" v-model="formInline.refund_status" clearable placeholder="请选择退款状态">
          <el-option label="正常" value="100">正常</el-option>
          <el-option label="退款中" value="200">退款中</el-option>
          <el-option label="退款成功" value="300">退款成功</el-option>
          <el-option label="退款成功" value="400">拒绝退款</el-option>
          <el-option label="退款成功" value="800">已支付</el-option>
          <el-option label="退款成功" value="900">待支付</el-option>
        </el-select>

        <el-button type="danger" round plain  @click="restbtn" >清空</el-button>
        <el-button type="danger" round style="background-color: #2974FF;" @click="searchbtn" >搜索</el-button>
        
      </div>
      <!-- 拨打 -->
      <div @click="calldig"  class="t_star_btn">
        <img src="../../../../static/img/wh.png" style="width: 44px;margin-right: 10px;display: block;" alt="" >
        开始外呼
      </div>
      <div>
        <el-table
        v-if="this.$route.query.type!=3"
        :header-cell-style="{ 
        background:'#F4F4F4',
        color:'#7D8087'}"
          :data="tableData"
          style="width: 100%;margin-top: 20px;">
          <el-table-column
            prop="order_id"
            align="center"
            label="订单（业务）ID">
          </el-table-column>
          <el-table-column
            prop="source"
            align="center"
            label="订单来源">
          </el-table-column>
          <el-table-column
            prop="source_id"
            align="center"
            label="外部订单编号">
          </el-table-column>
          <el-table-column
            prop="created_at"
            align="center"
            label="订单创建时间">
          </el-table-column>
          <el-table-column
            prop="good_name"
            align="center"
            label="商品名称">
          </el-table-column>
          <el-table-column
            prop="good_sku"
            align="center"
            label="商品编码">
          </el-table-column>
          <el-table-column
            prop="refund_name"
            align="center"
            label="退款状态">
          </el-table-column>
          
        </el-table>
        <el-table
        v-else
        :header-cell-style="{ 
        background:'#F4F4F4',
        color:'#7D8087'}"
          :data="tableData"
          style="width: 100%;margin-top: 20px;">
          <el-table-column
            prop="id"
            align="center"
            label="订单（业务）ID">
          </el-table-column>
          <el-table-column
            prop="created_at"
            align="center"
            label="任务导入时间">
          </el-table-column>
          <el-table-column
            prop="source_id"
            align="center"
            label="外呼状态">
            <template slot-scope="scope">
              <span v-if="scope.row.call_status==1">未接通</span>
              <span v-else-if="scope.row.call_status==2">已接通</span>
              <span v-else-if="scope.row.call_status==3">预占</span>
              <span v-else>未拨打</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right;margin-top: 20px;">
          <el-pagination
            @current-change="changepage"
            background
            :page-size="formInline.pageSize"
            layout="total,prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <wfoot></wfoot>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index3.vue";
  import wfoot from "@/components/callsystem/wfoot.vue";
  

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot,
      UploadExcelComponent,
      wfoot,
    },
    name: 'quanyi',
    data() {
      return {
        user_name:"",
        shopid:'',
        formInline:{
          source: '',
          refund_status: '',
          good_sku:"",
          start:"",
          end:"",
          page:1,
          pageSize:20
        },
        tableData: [],
        total:1000,
        
        url: '',
        id:'',
        user_func:'',
        loading:false,
        times:[],
        callStatus:0,
        title:'',
        called_num:'',
        total_num:'',

      }
    },
    created() {
      this.url = window.location.origin
      this.id = this.$route.query.id
      this.title = this.$route.query.title
      this.called_num = this.$route.query.called_num
      this.total_num = this.$route.query.total_num
      var user = JSON.parse(localStorage.getItem('USER'));
      this.user_name = user.name
      this.user_func = user.functions
  
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()
     
    },
    methods: {
      
      //搜索
      searchbtn(){
        this.formInline.page = 1
        //列表
        this.getlist()
      },
      //列表
      getlist(){
        var that = this
        this.loading = true
        let data = {}

        if(this.$route.query.type==3){

          data.page = this.formInline.page
          data.page_size = this.formInline.pageSize
          data.task_id = this.id
          data.start = this.formInline.start
          data.end = this.formInline.end

          axios.get('/api/plan-market/call/marketing/order_list/v2',{params:data})
          .then(response => {
            if(response.data.msg.code == 0){
              console.log('--00')
              console.log(response.data.data)
              that.tableData = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            }else{
              that.$message.error(response.data.msg.info);
            }
          })


        }else{
          data.page = this.formInline.page
          data.page_size = this.formInline.pageSize
          data.task_id = this.id
          data.called = this.callStatus
          data.source = this.formInline.source
          data.good_sku = this.formInline.good_sku
          data.refund_status = this.formInline.refund_status
          data.start = this.formInline.start
          data.end = this.formInline.end




          axios.get('/api/plan-market/call/task/order_list/v2',{params:data})
          .then(response => {
            if(response.data.msg.code == 0){
              console.log('--00')
              console.log(response.data.data)
              that.tableData = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            }else{
              that.$message.error(response.data.msg.info);
            }
          })
        } 

        
      },
      //翻页
      changepage(val){
        this.loading = true
        console.log(val)
        this.formInline.page = val
        this.getlist()
      },
  
      
      timechange:function(){
        if(this.times != null){
          this.formInline.start = this.times[0];
          this.formInline.end = this.times[1];
        }else{
          this.formInline.start = ''
          this.formInline.end = ''
        }
      },
      restbtn(){
          this.formInline.source = ''
          this.formInline.good_sku = ''
          this.formInline.refund_status = ''
          this.formInline.start = ''
          this.formInline.end = ''
          this.times = []
      },
      //退出
			exit:function(){
				var that = this
				axios.get('/api/auth/logout')
					.then(function () {
						that.$router.push({ path: "/callsystem/wlogin" });
					})
			},
      calldig(){
        this.$router.push({path:'/callsystem/newcalls/waihuzhongxin/calldig',query:{id:this.id,title:this.title,called_num:this.called_num,total_num:this.total_num,source:this.formInline.source,good_sku:this.formInline.good_sku,refund_status:this.formInline.refund_status,start:this.formInline.start,end:this.formInline.end,type:this.$route.query.type}})
      },
      gopage(url){
        this.$router.push({path:url})
      }
    },
    beforeDestroy(){
     
    },
    
    
  }
</script>

<style  scoped>

    .t_dr_btn{
        text-align: center;
        width: 160px;
        background-color:#2974FF;
        border-radius: 4px;
    }
    /deep/ .t_dr_btn .el-button--text{
      color: white;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      color: #727272;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
    }
    .powertopli_lei{
      background-color: white;
      color: #2974FF;
    }
    .t_under_line{
      width: 20px;
      height: 4px;
      background-color:#F9F9F9 ;
      border-radius: 4px;
      margin-top: 10px;
    }
    .t_under_line_lei{
      
      background-color:#2974FF ;
     
    }
    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 30px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;
      
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/.index .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/.index .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/.index .btn-next{ border-radius: 14px; padding: 0 10px;}
    .el-button--danger:hover{
      background-color: #2974FF;
    }
    .t_top_tool{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      box-sizing: border-box;
      padding: 13px 30px 20px 30px;
    }
    .fenline{
      background-color: #f4f4f4;
      height: 10px;
    }
    .t_logo_box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 0 30px 10px 30px;
    }
    .t_logo_left{

    }
    .t_logo_img{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      color: #F1F8FF;
      font-size: 24px;
    }
    .t_logo_bg{
      background-color:#F1F8FF ;
      border-radius: 10px;
      width: 46px;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }
    .t_logo_bg img{
      width: 30px;
    }
    .t_renwu_box{
      display: flex;
      color: #999999;
      font-size: 24px;
      align-items: center;
    }
    .t_star_btn{
    background-color: #2974FF;
    color: white;
    height: 90px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-top: 20px;
    cursor: pointer;
  }
</style>
